<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/page/article-info.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/page/back2top.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/widget/page/adjust-font-size.css" />
    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj" href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />  
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>页面工具</h2>
                <p>这是一个综合的演示，包括下面几个组件。</p>

                <h2>采用了 .aj-article-info 样式</h2>

                <h2>回到顶部</h2>
                <pre class="prettyprint">
aj.widget.back2top();     // 纯命令
aj.widget.initBack2top(); // 有 UI</pre>

                <h2>选择正文字体大小</h2>
                <table class="aj-table" align="center">
                    <thead>
                        <tr>
                            <th>属性</th>
                            <th>含义</th>
                            <th>类型</th>
                            <th>是否必填，默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>articleTarget</td>
                            <td>正文所在的位置，通过 CSS Selector 定位</td>
                            <td>String</td>
                            <td>n, article p</td>
                        </tr>
                    </tbody>
                </table>

                
                <p>例子：</p>
                <pre class="prettyprint"><xmp><aj-adjust-font-size></aj-adjust-font-size></xmp></pre>

                <h2>切换正体中文、简体中文</h2>
                <p>字库文件较大，外部引入 js。引入下面 HTML。原理详见我博客 <a href="https://blog.csdn.net/zhangxin09/article/details/5810868" target="_blank">《对JavaScript繁简字切换的小改进》、
                    <a href="https://blog.csdn.net/zhangxin09/article/details/50814563" target="_blank">《对JavaScript繁简字切换的小改进》</a></p>

                <pre class="prettyprint"><xmp><span>
    <a href="javascript:;" onclick="aj.widget.page.TraditionalChinese.toSimpleChinese(this);" class="simpleChinese selected">简体中文</a>
   /<a href="javascript:;" onclick="aj.widget.page.TraditionalChinese.toChinese(this);" class="Chinese">正体中文</a>
</span></xmp></pre>

                <div class="aj-article-info" style="width: 80%;margin:5% 0;">
                    <article>
                        <h1>Lorem Ipsum</h1>
                        <h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
                            velit..."</h4>
                        <h2>"无人爱苦，亦无人寻之欲之，乃因其苦..."</h2>
                        <h2>什么是Lorem Ipsum?</h2>
                        <p>Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem
                            Ipsum从西元15世纪起就被作为此领域的标准文本使用。它不仅延续了五个世纪，还通过了电子排版的挑战，其雏形却依然保存至今。在1960年代，”Leatraset”公司发布了印刷着Lorem
                            Ipsum段落的纸张，从而广泛普及了它的使用。最近，计算机桌面出版软件”Aldus PageMaker”也通过同样的方式使Lorem Ipsum落入大众的视野。</p>

                        <h2>我们为何用它？</h2>
                        <p>无可否认，当读者在浏览一个页面的排版时，难免会被可阅读的内容所分散注意力。Lorem
                            Ipsum的目的就是为了保持字母多多少少标准及平均的分配，而不是“此处有文本，此处有文本”，从而让内容更像可读的英语。如今，很多桌面排版软件以及网页编辑用Lorem
                            Ipsum作为默认的示范文本，搜一搜“Lorem Ipsum”就能找到这些网站的雏形。这些年来Lorem
                            Ipsum演变出了各式各样的版本，有些出于偶然，有些则是故意的（刻意的幽默之类的）。
                        </p>

                        <h2>它起源于哪里？</h2>
                        <p>恰恰与流行观念相反，Lorem
                            Ipsum并不是简简单单的随机文本。它追溯于一篇公元前45年的经典拉丁著作，从而使它有着两千多年的岁数。弗吉尼亚州Hampden-Sydney大学拉丁系教授Richard
                            McClintock曾在Lorem
                            Ipsum段落中注意到一个涵义十分隐晦的拉丁词语，“consectetur”，通过这个单词详细查阅跟其有关的经典文学著作原文，McClintock教授发掘了这个不容置疑的出处。Lorem
                            Ipsum始于西塞罗(Cicero)在公元前45年作的“de Finibus Bonorum et Malorum”（善恶之尽）里1.10.32
                            和1.10.33章节。这本书是一本关于道德理论的论述，曾在文艺复兴时期非常流行。Lorem Ipsum的第一行”Lorem ipsum dolor sit
                            amet..”节选于1.10.32章节。</p>
                        <p>以下展示了自1500世纪以来使用的标准Lorem Ipsum段落，西塞罗笔下“de Finibus Bonorum et Malorum”章节1.10.32 ，
                            1.10.33的原著作，以及其1914年译自H. Rackham的英文版本。
                        </p>

                        <h2>我能从哪里获取？</h2>
                        <p>如今互联网提供各种各样版本的Lorem Ipsum段落，但是大多数都多多少少出于刻意幽默或者其他随机插入的荒谬单词而被篡改过了。如果你想取用一段Lorem
                            Ipsum，请确保段落中不含有令人尴尬的不恰当内容。所有网上的Lorem
                            Ipsum生成器都倾向于在必要时重复预先准备的部分，然而这个生成器则是互联网上首个确切的生成器。它使用由超过200个拉丁单词所构造的词典，结合了几个模范句子结构，来生成看起来恰当的Lorem
                            Ipsum。因此，生成出的结果无一例外免于重复，刻意的幽默，以及非典型的词汇等等。</p>

                    </article>
                    <aj-adjust-font-size></aj-adjust-font-size>

                    <span>
                         <a href="javascript:;" onclick="aj.widget.page.TraditionalChinese.toSimpleChinese(this);" class="simpleChinese selected">简体中文</a>
                        /<a href="javascript:;" onclick="aj.widget.page.TraditionalChinese.toChinese(this);" class="Chinese">正体中文</a>
                    </span>
                </div>

            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/base/aj.js"></script>
    <script src="../../dist/widget/page/back2top.js"></script>
    <script src="../../dist/widget/page/adjust-font-size.js"></script>
    <script src="../../dist/widget/page/back2top.js"></script>
    <script src="../../dist/widget/page/Chinese.js"></script>
    <script>
        new Vue({ el: '.aj-article-info' });
        aj.widget.initBack2top();
    </script>
</body>

</html>